<template>
  <div class="container">
    <el-empty description="您还没有任何收藏" v-if="showEmpty" class="empty-state"/>
    <div class="cards-grid" v-else>
      <article
          v-for="item in cards"
          :key="item.id"
          class="article-card"
          @click="toArticle(item.articleId)"
      >
        <div class="card-header">
          <img
              :src="item.articleMainList[0].pic"
              alt="文章封面"
              class="cover-image"
          />
          <el-button
              type="danger"
              :icon="Star"
              circle
              class="favorite-btn"
              @click.stop="removeSubscribe(item.id, item.articleId)"
          />
        </div>

        <div class="card-body">
          <el-tooltip :content="item.articleMainList[0].title" placement="top">
            <h3 class="card-title">
              {{ item.articleMainList[0].title }}
            </h3>
          </el-tooltip>

          <div class="card-meta">
            <el-tag type="success" size="small">
              {{ showDictUtil(item.articleMainList[0].articleType, dict) }}
            </el-tag>
            <div class="meta-right">
              <time class="meta-item">
                {{ parseTime(item.articleMainList[0].createTime, '{y}-{m}-{d}') }}
              </time>
              <span class="meta-item">
                作者：{{ item.articleMainList[0].user.nickName }}
              </span>
            </div>
          </div>
        </div>
      </article>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Star } from '@element-plus/icons-vue'
import { getSubscribeArticle, deleteSubscribe } from '@/api/articleApi'
import { showDictUtil } from '@/tool/commonFun'
import { parseTime } from '@/tool/utils'
import {getDict} from "@/api/common.js";

const router = useRouter()

// 响应式数据
const cards = ref([])
const dict = ref([])
const showEmpty = ref(true)

// 初始化数据
onMounted(async () => {
  const user = JSON.parse(localStorage.getItem('healthUser'))
  if (!user) {
    ElMessage.warning('请先登录')
    return
  }

  await Promise.all([fetchDict(), getSubscribeArticles()])
})

// 获取字典数据
const fetchDict = async () => {
  const { data } = await getDict({ value: 'wz_lx' })
  dict.value = data[0]?.child || []
}

// 获取收藏文章
const getSubscribeArticles = async () => {
  const { data } = await getSubscribeArticle()
  cards.value = data || []
  showEmpty.value = cards.value.length === 0
}

// 跳转文章详情
const toArticle = (id) => {
  router.push(`/health/article/${id}`)
}

// 移除收藏
const removeSubscribe = async (id, articleId) => {
  try {
    await ElMessageBox.confirm('确定要取消收藏吗？', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    const { msg } = await deleteSubscribe(id, articleId)
    ElMessage.success(msg)
    await getSubscribeArticles()
  } catch (error) {
    // 取消操作
  }
}
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.empty-state {
  margin-top: 100px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  padding: 16px 0;
}

.article-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  overflow: hidden;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
  position: relative;
  aspect-ratio: 16/9;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.favorite-btn {
  position: absolute;
  right: 12px;
  top: 12px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.card-body {
  padding: 16px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  color: #333;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.meta-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.meta-item {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
}
</style>